<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue'
import IconLogo from '../assets/icons/IconLogo.vue'
import IconMenu from '../assets/icons/IconMenu.vue'
import headerImg from '@/assets/image/header.png'
import storage from '@/utils/storage'
import { useRoute } from 'vue-router'
import { DownOutlined } from '@ant-design/icons-vue'
import { logout } from '@/api/user'
import { message } from 'ant-design-vue'
import { devUrl, proUrl } from '@/utils/config'
const baseUrl = import.meta.env.MODE === 'dev' ? devUrl.baseUrl : proUrl.baseUrl
const drawerVisible = ref(false)
const route = useRoute()

// 用户信息
const userInfo = ref<any>(null)
// 检查是否为登录或注册页面
const isAuthPage = computed(() => {
  return route.path === '/login' || route.path === '/register'
})

const showDrawer = () => {
  drawerVisible.value = true
}

const closeDrawer = () => {
  drawerVisible.value = false
}
// 监听路由变化
watch(
  () => route.path,
  () => {
    console.log('路由变化了', route.path)
    const user = storage.get('user')
    if (user) {
      userInfo.value = user
    }
  },
)
// 初始化用户信息

onMounted(() => {
  const user = storage.get('user')
  if (user) {
    userInfo.value = user
  }
})
const handleLogout = async () => {
  try {
    const res = await logout()
    if (res.code === 200) {
      console.log('退出登录成功')
      message.success('退出登录成功')
      storage.remove('user')
      storage.remove('token')
      navigateTo('/')
    }
  } catch (error) {
    console.error('退出登录失败:', error)
  }
}
</script>

<template>
  <header class="app-header" :class="{ 'auth-page': isAuthPage }">
    <div class="header-container">
      <!-- Logo -->
      <NuxtLink to="/" class="logo">
        <div class="logo-icon">
          <IconLogo class="logo-svg" current-color="#fff" />
        </div>
        <span class="logo-text">鹿鸣博客</span>
      </NuxtLink>

      <!-- 移动端菜单按钮 -->
      <a-button type="text" class="mobile-menu-btn" @click="showDrawer">
        <template #icon>
          <IconMenu style="width: 24px; height: 24px" />
        </template>
      </a-button>

      <!-- 导航菜单 -->
      <nav class="nav-menu">
        <NuxtLink to="/" class="nav-item">首页</NuxtLink>
        <NuxtLink to="/articles" class="nav-item">文章</NuxtLink>
        <a-dropdown placement="bottom">
          <a class="nav-item dropdown-item" @click.prevent>
            关于本站
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              style="width: 16px; height: 16px; margin-left: 4px; display: inline-block"
            >
              <path
                d="M6 9l6 6 6-6"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <NuxtLink to="/about">关于我</NuxtLink>
              </a-menu-item>
              <a-menu-item>
                <a href="/admin" target="_blank">博客管理端</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </nav>

      <!-- 用户操作 -->
      <div v-if="!userInfo" class="user-actions">
        <NuxtLink to="/login">
          <a-button type="default" class="login-btn">登录</a-button>
        </NuxtLink>
        <NuxtLink to="/register">
          <a-button type="primary" class="register-btn">注册</a-button>
        </NuxtLink>
      </div>
      <a-dropdown v-else placement="bottomRight">
        <a class="ant-dropdown-link" @click.prevent>
          <div class="user-actions">
            <img :src="baseUrl + userInfo?.face || headerImg" alt="" />
            <span>{{ userInfo?.nickname || '秋水无痕' }}</span>
          </div>
          <DownOutlined style="color: #4a5568" />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item key="0">
              <div @click="navigateTo('/about/user-center')">用户中心</div>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3" disabled>
              <a-button type="primary" @click="handleLogout">退出登录</a-button>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

      <!-- 移动端抽屉导航 -->
      <a-drawer
        v-model:open="drawerVisible"
        title="菜单"
        placement="right"
        :width="280"
        :closable="true"
      >
        <div class="mobile-nav">
          <NuxtLink to="/" class="mobile-nav-item" @click="closeDrawer"> 首页 </NuxtLink>
          <NuxtLink to="/articles" class="mobile-nav-item" @click="closeDrawer"> 文章 </NuxtLink>
          <NuxtLink to="/categories" class="mobile-nav-item" @click="closeDrawer"> 分类 </NuxtLink>
          <div class="mobile-nav-section">
            <div class="mobile-nav-title">关于本站</div>
            <NuxtLink to="/about" class="mobile-nav-subitem" @click="closeDrawer">
              关于我
            </NuxtLink>
            <a href="/admin" target="_blank" class="mobile-nav-subitem" @click="closeDrawer">
              博客管理端
            </a>
          </div>
          <div class="mobile-nav-divider"></div>
          <NuxtLink to="/login" class="mobile-nav-item" @click="closeDrawer"> 登录 </NuxtLink>
          <NuxtLink to="/register" class="mobile-nav-item" @click="closeDrawer"> 注册 </NuxtLink>
        </div>
      </a-drawer>
    </div>
  </header>
</template>

<style scoped lang="less">
.app-header {
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.app-header.auth-page {
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); */
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: all 0.3s;
}

.logo:hover {
  transform: translateY(-2px);
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.logo-icon svg {
  width: 32px;
  height: 32px;
  color: white;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-header.auth-page .logo-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 导航菜单 */

.nav-menu {
  display: flex;
  gap: 32px;
  flex: 1;
  justify-content: flex-start;
  margin-left: 30px;
}

.nav-item {
  color: #4a5568;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s;
  position: relative;
}

.nav-item:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.08);
}

.nav-item.router-link-active {
  color: #667eea;
  font-weight: 600;
}

.nav-item.router-link-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-item svg {
  transition: transform 0.3s;
}

.dropdown-item:hover svg {
  transform: translateY(2px);
}

/* 用户操作 */
.ant-dropdown-link {
  display: flex;
  align-items: center;
}
.user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
  }
  span {
    font-size: 14px;
    color: #4a5568;
    margin-right: 20px;
  }
}

.search-btn :deep(.ant-btn) {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn svg {
  width: 20px;
  height: 20px;
  color: #4a5568;
}

.login-btn :deep(.ant-btn),
.register-btn :deep(.ant-btn) {
  height: 40px;
  border-radius: 10px;
  font-weight: 600;
  padding: 0 24px;
}

.login-btn :deep(.ant-btn) {
  border: 2px solid #e2e8f0;
  color: #4a5568;
}

.login-btn :deep(.ant-btn:hover) {
  border-color: #667eea;
  color: #667eea;
}

.register-btn :deep(.ant-btn) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.register-btn :deep(.ant-btn:hover) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
}

.mobile-menu-btn :deep(.ant-btn) {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn svg {
  color: #4a5568;
}

/* 移动端导航 */
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-item {
  padding: 16px;
  color: #4a5568;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s;
}

.mobile-nav-item:hover {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
}

.mobile-nav-item.router-link-active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}

.mobile-nav-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}

.mobile-nav-section {
  padding: 8px 0;
}

.mobile-nav-title {
  padding: 12px 16px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #a0aec0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-nav-subitem {
  padding: 12px 16px 12px 32px;
  color: #4a5568;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s;
  display: block;
}

.mobile-nav-subitem:hover {
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
}

.mobile-nav-subitem.router-link-active {
  color: #667eea;
  font-weight: 600;
}

/* 响应式 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
  }

  .logo-text {
    font-size: 18px;
  }

  .nav-menu {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .user-actions {
    gap: 8px;
  }

  .search-btn {
    display: none;
  }

  .login-btn :deep(.ant-btn),
  .register-btn :deep(.ant-btn) {
    padding: 0 16px;
    font-size: 14px;
    height: 36px;
  }
}
</style>
